import React, { Component } from 'react'
import style from './style.module.scss'

// 参数作为组件时首字母要大写
const addBorder = Com => props => {
    return <div className='border'>
        <Com {...props} newProps='这是新的属性'/>
    </div>
}

class Child1 extends Component {
    render() {
        return <>
            <p>子组件1——newProps：{this.props.newProps}</p>
        </>
    }
}
function Child2(props) {
    return <>
        <p>子组件2——newProps：{props.newProps}</p>
    </>
}

// 装饰器方法可以实现链式调用效果，但注意执行顺序是先下后上
@addBorder
@addBorder
class Child3 extends Component {
    render() {
        return <>
            <p>子组件3——newProps：{this.props.newProps}</p>
        </>
    }
}

const Child1Border1 = addBorder(Child1) // 普通class组件使用
const Child1Border2 = addBorder(addBorder(addBorder(Child2))) // 链式调用
const Child2Border1 = addBorder(Child2) // 函数组件使用
const Child3Border1 = addBorder(Child3) // 装饰器class组件使用

export default class HOC extends Component {
    render() {
        return <div className={style['style']}>
            <h3>高阶组件HOC</h3>
            <Child1Border1 />
            <hr />
            <Child1Border2 />
            <hr />
            <Child2Border1 />
            <hr />
            <Child3Border1 />
            <div>不要在class组件的render方法里使用高阶组件，因为不但会产生性能问题，由于频繁卸载挂载，导致一些参数也会丢掉。</div>
        </div>
    }
}
